<template>
  <div>
      <!-- 1. 间隔槽-->
      <!-- <gap-comp :height="1"></gap-comp> -->

      <!-- 2.分类数据区域  :main-active-index.sync="active"-->
      <van-tree-select height="100vh" :items="cateData" :main-active-index.sync="active">
          <!--二级分类区域 具名作用域插槽  -->
          <template #content>
              <!-- 一级分类标题 -->
              <van-divider :style="{ color: '#FF6040', borderColor: '#FF6040', padding: '0 16px' }">
                  {{ cateData[active].text }}
              </van-divider>
              <!-- 二级分类数据 -->
              <van-grid :column-num="3" :icon-size="60">
                  <van-grid-item v-for="item in cateData[active].children"
                  :key="item.id"
                      :icon="$pre + item.img" 
                      :text="item.catename" 
                      @click="goList(item.id)"
                  />
              </van-grid>
          </template>
      </van-tree-select>
  </div>
</template>

<script>
export default {
  data() {
      return {
          active: 0,//左侧一级分类默认选中下标
          cateData: [
              {
                  "id": 2,
                  "pid": 0,
                  "text": "手机通讯",
                  "img": "",
                  "status": 1,
                  "children": [
                      {
                          "id": 10,
                          "pid": 2,
                          "text": "诺基亚手机",
                          "img": "/uploads/category/fee7e580-6c2d-11ea-b86c-579aced212c2.png",
                          "status": 1
                      },
                      {
                          "id": 12,
                          "pid": 2,
                          "text": "手机配件",
                          "img": "/uploads/category/764b6740-9673-11ea-b348-a734901db180.jpg",
                          "status": 1
                      },
                      {
                          "id": 13,
                          "pid": 2,
                          "text": "小米手机",
                          "img": "/uploads/category/91238110-9673-11ea-b348-a734901db180.jpg",
                          "status": 1
                      },
                      {
                          "id": 14,
                          "pid": 2,
                          "text": "oppo手机",
                          "img": "/uploads/category/5f200c50-9674-11ea-b348-a734901db180.jpg",
                          "status": 1
                      },
                      {
                          "id": 24,
                          "pid": 2,
                          "text": "苹果macbok",
                          "img": "/uploads/category/0ebd5d00-12af-11eb-bcdf-7718b9d6829d.jpg",
                          "status": 1
                      },
                      {
                          "id": 25,
                          "pid": 2,
                          "text": "甜婶‘",
                          "img": "/uploads/category/cb22d1f0-ac63-11ed-a19e-0999552e1a6b.jpg",
                          "status": 1
                      }
                  ]
              },
              {
                  "id": 3,
                  "pid": 0,
                  "text": "电脑办公",
                  "img": "",
                  "status": 1,
                  "children": [
                      {
                          "id": 11,
                          "pid": 3,
                          "text": "笔记本",
                          "img": "/uploads/category/ddb0b9f0-6de0-11ea-a8e1-0d680bf54839.jpg",
                          "status": 1
                      },
                      {
                          "id": 15,
                          "pid": 3,
                          "text": "mac本",
                          "img": "/uploads/category/86b1e680-9674-11ea-b348-a734901db180.jpg",
                          "status": 1
                      },
                      {
                          "id": 16,
                          "pid": 3,
                          "text": "华为笔记本",
                          "img": "/uploads/category/a740dc80-9674-11ea-b348-a734901db180.jpg",
                          "status": 1
                      },
                      {
                          "id": 17,
                          "pid": 3,
                          "text": "戴尔笔记本",
                          "img": "/uploads/category/b63aeff0-9674-11ea-b348-a734901db180.jpg",
                          "status": 1
                      }
                  ]
              },
              {
                  "id": 4,
                  "pid": 0,
                  "text": "家居",
                  "img": "",
                  "status": 1
              },
              {
                  "id": 5,
                  "pid": 0,
                  "text": "服装",
                  "img": "",
                  "status": 1
              },
              {
                  "id": 7,
                  "pid": 1,
                  "text": "电视",
                  "img": "/uploads/category/fc3abc50-6c2c-11ea-b86c-579aced212c2.jpg",
                  "status": 1
              },
              {
                  "id": 8,
                  "pid": 1,
                  "text": "空调",
                  "img": "/uploads/category/354b31f0-6c2d-11ea-b86c-579aced212c2.jpg",
                  "status": 1
              },
              {
                  "id": 9,
                  "pid": 1,
                  "text": "洗衣机",
                  "img": "/uploads/category/436e9470-6c2d-11ea-b86c-579aced212c2.jpg",
                  "status": 1
              },
              {
                  "id": 18,
                  "pid": 0,
                  "text": "男鞋",
                  "img": "",
                  "status": 1
              },
              {
                  "id": 19,
                  "pid": 0,
                  "text": "女鞋",
                  "img": "",
                  "status": 1
              },
              {
                  "id": 20,
                  "pid": 0,
                  "text": "化妆品",
                  "img": "",
                  "status": 1
              },
              {
                  "id": 21,
                  "pid": 0,
                  "text": "运动户外",
                  "img": "",
                  "status": 1
              },
              {
                  "id": 22,
                  "pid": 0,
                  "text": "汽车",
                  "img": "/uploads/category/ab594a60-1288-11eb-bcdf-7718b9d6829d.jfif",
                  "status": 1
              },
              {
                  "id": 23,
                  "pid": 0,
                  "text": "苹果笔记本",
                  "img": "/uploads/category/a4272390-12ae-11eb-bcdf-7718b9d6829d.jpg",
                  "status": 1
              }
          ],//商品分类数据
      };
  },
  mounted() {
      // 获取全部分类数据
      this.getCates()
  },
  methods: {
      // 跳转到商品列表页面
      goList(cateid) { 
          this.$router.push("/goodlist?type=2&cateid="+cateid)
      },
      // 获取全部分类数据
      getCates() {
          this.$api.reqGetCates()
              .then(res => {
                  this.cateData = res
                  // 修改一级分类名称
                  this.cateData.forEach(item => {
                      item.text = item.catename
                  })
                  console.log(res)
              })
              .catch(err => console.log(err))
      }
  }
};
</script>
